
layui.use(function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var element = layui.element;
    var widgetTypeTabIdx = 0;
    var checkwidgetident = '';

    function initAddWidgetBtn() {
        var add_widgethtml = `
                        <div class="add_widget">
                             <i class="iconfont icon-tianjia "></i>  插入组件
                        </div>
        `;
        $('.widgets').each(function (i, v) {
            if ($(this).children().length == 0) {
                var area = $(this).attr('area');
                $(this).html(add_widgethtml);
            }
        });

        $('.widget').next('.add_widget').remove();
        $('.widgets').find('.widget:first').prev().remove();
        $('.widgets').find('.widget:first').before(add_widgethtml);
        $('.widget').after(add_widgethtml);
    }
    initAddWidgetBtn();

    $('body').on('click', '.add_widget', function (e) {
        var area = $(this).attr('area');
        e.stopPropagation();
        var thisaddwidget = $(this);
        layer.open({
            type: 1,
            area: ['90%', '90%'], // 宽高
            title: '选择组件',
            content: `
                <div class="layui-tab layui-tab-brief" lay-filter="widgetTypeTab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">选择挂件</li>
                        <li>自定义内容</li>
                    </ul>

                    <div class="layui-tab-content  rc-pagepadding">
                        <div class="layui-tab-item layui-show" id="allwidgets"> </div>
                        <div class="layui-tab-item">
                            <textarea class="layui-textarea" id="customWidgetContent" style="min-height: 400px;"></textarea>
                        </div>
                    </div>
                </div>
    `,
            btn: ['确定', '关闭'], //按钮
            btn1: function (index, layero, that) {
                if (widgetTypeTabIdx == 1) {
                    thisaddwidget.before('<div class="widget" type="2">' + $('#customWidgetContent').val() + '</div>');
                    initAddWidgetBtn();
                    layer.closeAll();
                } else {
                    chooseWidget(thisaddwidget);
                }
            },
            success: function () {
                getAllWidget();
            }
        });


    })

    // tab 切换事件

    element.on('tab(widgetTypeTab)', function (data) {
        widgetTypeTabIdx = data.index;

    });

    function getAllWidget() {
        $.ajax({
            url: '/uc/Index/index?optype=selWidget', //请求路径
            type: "POST", //请求方式
            data: {

            }, // 默认写法
            success: function (data) {
                if (data.code == 0) {
                    var html = '<div class="layui-row layui-col-space5 layui-form" style="text-algin:center">';
                    $.each(data.data.widgets.data, function (i, v) {
                        html += `  <div class="layui-col-md4"  style="text-align: center;">
                                            <div class=""><img src="` + v.logo + `"/></div>
                                            <div><input name="widget" lay-filter="checkwidget" type="radio" value="`+ v.ident + `" title="` + v.title + `"/></div>
                                    </div>`;
                    })
                    html += '</div">';

                    $('#allwidgets').html(html);
                    form.render();
                }
            },
            error: function () {

            },

        });
    }

    // 选择Widget 事件
    form.on('radio(checkwidget)', function (data) {
        checkwidgetident = data.value;
    });

    function chooseWidget(thisaddwidget) {

        $.ajax({
            url: '/uc/Index/index?optype=chooseWidget', //请求路径
            type: "POST", //请求方式
            data: {
                widgetident: checkwidgetident,

            }, // 默认写法
            success: function (data) {
                if (data.code == 0) {
                    thisaddwidget.before('<div class="widget" type="0" widgetident=' + checkwidgetident + '>' + data.data.widget + '</div>');
                    layer.closeAll();
                } else {

                }
                initAddWidgetBtn();
            },
            error: function () {

            },

        });
    }



    /**** 移除挂件******/
    $('body').on('mouseenter', '.widget', function (e) {
        $(this).find('.delwidget').remove();
        $(this).append('<div class="delwidget"><i class="icon-a-shanchu iconfont"></i></div>');
    });


    $('body').on('mouseleave', '.widget', function (e) {
        $(this).find('.delwidget').remove();
    });



    $('body').on('click', '.delwidget', function (e) {
        $(this).parent().next('.add_widget').remove();
        $(this).parent().remove();
        initAddWidgetBtn();
    });
    /**** 移除挂件结束******/


    $('#save-layout').click(function () {
        var widgets = [];
        $('.widgets').each(function (i, v) {
            var area = $(v).attr('area');
            $(this).find('.widget').each(function (_i, _v) {
                widgets.push({
                    areaid: area,
                    html: $(_v).attr('type') == 2 ? $(_v).html() : '',
                    widgetident: $(_v).attr('type') == 2 ? 0 : $(_v).attr('widgetident'),
                    type: $(_v).attr('type')
                });
            })

        });

        $.ajax({
            url: '/uc/Index/index?optype=saveLayout', //请求路径
            type: "POST", //请求方式
            data: {
                layouts: JSON.stringify(widgets)
            }, // 默认写法
            success: function (data) {
                if (data.code == 0) {
                    toastr_success('保存成功');

                } else {
                    toastr_error(data.message);
                }

            },
            error: function () {

            },

        });

    });


});